<template>
  <Support />
  <div class="flex flex-row gap-3 items-center relative">
    <div class="flex-row gap-3 hidden lg:flex">
      <button type="button"
        class="relative flex whitespace-nowrap gap-2 items-center justify-center text-sm py-3 px-7 leading-4  border rounded-3xl shadow-sm font-bold opacity-100 text-white bg-black hover:bg-cape-cod  cursor-pointer border-black shadow-sm focus:outline-none"><span>Sign
          in</span></button>
      <button type="button"
        class="relative flex whitespace-nowrap gap-2 items-center justify-center text-sm py-3 px-7 leading-4  border rounded-3xl shadow-sm font-bold opacity-100 text-black bg-white  cursor-pointer border-gray-100 shadow-sm focus:outline-none"><span>Sign
          up</span></button>
    </div>
    <div class="relative">
      <div>
        <div class="flex flex-row items-center gap-3">
          <svg class="text-cape-cod cursor-pointer p-3 w-12 h-12 xl:hidden" width="27px" height="22px"
            viewBox="0 0 27 22" version="1.1" xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Group 2</title>
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
              <g id="Group-2" transform="translate(1.500000, 1.500000)" stroke="currentColor" stroke-width="3">
                <line x1="0.5" y1="0.5" x2="23.5" y2="0.5" id="Line-3"></line>
                <line x1="0.5" y1="9.5" x2="23.5" y2="9.5" id="Line-3"></line>
                <line x1="0.5" y1="18.5" x2="23.5" y2="18.5" id="Line-3"></line>
              </g>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import Support from './Support.vue'
</script> 
